<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="meta">
    <!-- 网页使用的字符编码集 -->
    <meta charset="UTF-8">
    <!-- 网页的搜索关键词 -->
    <meta name="keywords" th:content="${options.siteKeywords}">
    <!-- 兼容移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <!-- 网页标题 -->
    <title th:text="${options.siteTitle}"></title>
    <!-- 网页图标 -->
    <link rel="shortcut icon" th:href="@{/static/img/favicon.ico}"/>
    <!-- JQuery_3-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <!-- BootStrap_4-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
            crossorigin="anonymous"></script>
    <!-- 使IE9以下的浏览器兼容HTML5 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/r29/html5.min.js"></script>
    <!-- 使IE9以下的浏览器兼容CSS3 -->
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
</head>

<body>
<header th:fragment="header">
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" th:href="${options.siteIndexUrl}">
            <img th:src="@{/static/img/favicon.ico}" width="30" height="30" class="d-inline-block align-top" alt=""/>
            <span th:text="${options.siteTitle}"></span>
        </a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <th:block th:each="menu : ${menus}">
                    <th:block th:if="${menu.childrenMenus eq null}">
                        <li class="nav-item">
                            <th:block th:if="menu.menuUrl eq null">
                                <a class="nav-link" th:text="${menu.menuName}"></a>
                            </th:block>
                            <th:block th:if="menu.menuUrl ne null">
                                <a class="nav-link" th:href="${options.siteIndexUrl}+${menu.menuUrl}"
                                   th:text="${menu.menuName}"></a>
                            </th:block>
                        </li>
                    </th:block>
                    <th:block th:if="${menu.childrenMenus ne null}">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                               data-toggle="dropdown" aria-expanded="false"
                               th:href="${options.siteIndexUrl}+${menu.menuUrl}" th:text="${menu.menuName}"></a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <th:block th:each="xmenu : ${menu.childrenMenus}">
                                    <a class="dropdown-item" th:href="${options.siteIndexUrl}+${xmenu.menuUrl}"
                                       th:text="${xmenu.menuName}"></a>
                                </th:block>
                            </div>
                        </li>
                    </th:block>
                </th:block>
            </ul>
        </div>
        <th:block th:if="${session.user} eq null">
            <div class="col-4 d-flex justify-content-end align-items-center">
                <a class="btn btn-info" th:href="@{/login}">登录</a>
            </div>
        </th:block>
        <th:block th:if="${session.user} ne null">
            <div class="dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="dropdownMenuLink">
                    <img class="rounded-circle" th:src="@{${session.user.userAvatar}}" width="38px" height="38px"/>
                    <span class="text-muted" th:text="${session.user.userNickname}"></span>
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <th:block th:if="${session.user.userRole} eq 1">
                        <a class="dropdown-item" href="#">管理员界面</a>
                    </th:block>
                    <a class="dropdown-item" href="#">创作</a>
                    <a class="dropdown-item" th:href="@{/logout}">注销</a>
                </div>
            </div>
        </th:block>
    </nav>
</header>

<footer th:fragment="footer" class="footer">
    <style>
        footer .col-12 {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
    <div class="container-fluid">
        <div class="row text-muted bg-dark">
            <div class="col-12 text-center">
                <a th:text="'Copyright©2021'+${options.siteTitle}+'|'"></a>
                <a th:text="${options.siteIcpNum}" href="https://beian.miit.gov.cn/"></a>
            </div>
        </div>
    </div>
</footer>
</body>

</html>